import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15
import QtQml 2.15
import Qt.labs.platform 1.1
import FluentUI 1.0
import Admin.Auth 1.0
import "comp"
import GlobalConsts 1.0

FluWindow {
    id: window
    title: qsTr("首页")
    width: 1230
    height: 756
    minimumWidth: 605
    minimumHeight: 373
    launchMode: FluWindowType.SingleTask
    fitsAppBarWindows: true
    appBar: FluAppBar {
        height: 30
        showDark: true
        darkClickListener: button => handleDarkChanged(button)
        closeClickListener: () => {
                                dialog_close.open()
                            }
        z: 7
    }

    Component.onCompleted: {

    }

    Component.onDestruction: {
        FluRouter.exit(0)
    }

    SystemTrayIcon {
        id: system_tray
        visible: true
        icon.source: "qrc:/res/icon/app.ico"
        tooltip: SysConstants.displayName
        menu: Menu {
            MenuItem {
                text: "退出"
                onTriggered: {
                    FluRouter.exit(0)
                }
            }
        }
        onActivated: reason => {
                         if (reason === SystemTrayIcon.Trigger) {
                             window.show()
                             window.raise()
                             window.requestActivate()
                         }
                     }
    }

    Timer {
        id: timer_window_hide_delay
        interval: 150
        onTriggered: {
            window.hide()
        }
    }

    FluContentDialog {
        id: dialog_close
        title: qsTr("退出")
        message: qsTr("确定要退出程序吗？")
        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
        positiveText: qsTr("退出")
        negativeText: qsTr("取消")
        onPositiveClicked: {
            FluRouter.exit(0)
        }
    }

    FluMenu {
        id: langMenu
        title: qsTr("Lang")
        FluMenuItem {
            text: "中文"
            onTriggered: {
                showInfo(qsTr("中文"))
            }
        }
        FluMenuItem {
            text: "English"
            onTriggered: {
                showInfo(qsTr("English"))
            }
        }
        FluMenuItem {
            text: "日本語"
            onTriggered: {
                showInfo(qsTr("日本語"))
            }
        }
        FluMenuItem {
            text: "Français"
            onTriggered: {
                showInfo(qsTr("Français"))
            }
        }
    }

    Component {
        id: nav_item_right_menu
        FluMenu {
            width: 186
            FluMenuItem {
                text: qsTr("Open in Separate Window")
                font: FluTextStyle.Caption
                onClicked: {
                    FluRouter.navigate("/pageWindow", {
                                           "title": modelData.title,
                                           "url": modelData.url
                                       })
                }
            }
        }
    }

    Flipable {
        id: flipable
        anchors.fill: parent
        property bool flipped: false
        property real flipAngle: 0
        transform: Rotation {
            id: rotation
            origin.x: flipable.width / 2
            origin.y: flipable.height / 2
            axis {
                x: 0
                y: 1
                z: 0
            }
            angle: flipable.flipAngle
        }
        states: State {
            PropertyChanges {
                target: flipable
                flipAngle: 180
            }
            when: flipable.flipped
        }
        transitions: Transition {
            NumberAnimation {
                target: flipable
                property: "flipAngle"
                duration: 1000
                easing.type: Easing.OutCubic
            }
        }
        back: Item {
            anchors.fill: flipable
            visible: flipable.flipAngle !== 0
            Row {
                id: layout_back_buttons
                z: 8
                anchors {
                    top: parent.top
                    left: parent.left
                    topMargin: FluTools.isMacos() ? 20 : 5
                    leftMargin: 5
                }
                FluIconButton {
                    iconSource: FluentIcons.ChromeBack
                    width: 30
                    height: 30
                    iconSize: 13
                    onClicked: {
                        flipable.flipped = false
                    }
                }
                FluIconButton {
                    iconSource: FluentIcons.Sync
                    width: 30
                    height: 30
                    iconSize: 13
                    onClicked: {
                        loader.reload()
                    }
                }
                Component.onCompleted: {
                    window.setHitTestVisible(layout_back_buttons)
                }
            }
        }

        front: Item {
            id: page_front
            visible: flipable.flipAngle !== 180
            anchors.fill: flipable
            NavigationView {
                property int clickCount: 0
                id: nav_view
                width: parent.width
                height: parent.height
                cellWidth: 230
                z: 999
                pageMode: FluNavigationViewType.NoStack
                buttonBack.visible: false
                hideNavAppBar: true
                // header面板
                sideHeaderBox: Rectangle {
                    id: head_view
                    width: parent.width
                    height: 40
                    color: "#1677FF" //FluTheme.primaryColor
                    // radius: 2
                    Row {
                        anchors {
                            verticalCenter: parent.verticalCenter
                            left: parent.left
                            leftMargin: 10
                            horizontalCenter: parent.horizontalCenter
                        }
                        spacing: 10
                        Image {
                            width: 20
                            height: 20
                            visible: status === Image.Ready ? true : false
                            source: "qrc:/res/image/image4.png"
                            anchors.verticalCenter: parent.verticalCenter
                        }
                        FluText {
                            text: SysConstants.displayName
                            visible: true
                            font.pixelSize: 20
                            font.weight: Font.Bold
                            color: "#ffffff"
                            anchors.verticalCenter: parent.verticalCenter
                        }
                    }
                }
                contentHeaderBar: Rectangle {
                    // radius: 2
                    color: "#1677FF"
                    RowLayout {
                        anchors.fill: parent
                        spacing: 2

                        // 左侧：边栏折叠按钮
                        EnhancedButton {
                            id: sideButton
                            Layout.fillHeight: true
                            iconSource: "qrc:/res/icon/menu-unfold-left.svg"
                            iconColor: "#e6e6e6"
                            iconWidth: 26
                            iconHeight: 26
                            onClicked: {
                                if (GlobalModel.displayMode == FluNavigationViewType.Auto
                                        || GlobalModel.displayMode == FluNavigationViewType.Open) {
                                    GlobalModel.displayMode = FluNavigationViewType.Compact
                                    sideButton.iconSource = "qrc:/res/icon/menu-unfold-right.svg"
                                } else {
                                    GlobalModel.displayMode = FluNavigationViewType.Open
                                    sideButton.iconSource = "qrc:/res/icon/menu-unfold-left.svg"
                                }
                            }
                        }
                        Item {
                            Layout.fillWidth: true
                        }

                        // 用户头像
                        EnhancedButton {
                            buttonWidth: 100
                            Layout.fillHeight: true
                            iconSource: AuthManager.user.avatar
                            iconWidth: 32
                            iconHeight: 32
                            iconRadius: iconWidth / 2
                            title: AuthManager.user.name
                            titleColor: "#dee2e6"
                            titleBelow: false
                        }

                        EnhancedButton {
                            Layout.fillHeight: true
                            iconSource: "qrc:/res/icon/mob-quiet-hours.svg"
                            iconColor: "#e6e6e6"
                            iconWidth: 26
                            iconHeight: 26
                            onClicked: {
                                changeDark()
                            }
                        }

                        EnhancedButton {
                            Layout.fillHeight: true
                            iconSource: "qrc:/res/icon/language.svg"
                            iconColor: "#e6e6e6"
                            iconWidth: 20
                            iconHeight: 20
                            onClicked: {
                                langMenu.popup()
                            }
                        }
                    }
                }
                items: ItemsOriginal
                // footerItems: ItemsFooter
                topPadding: {
                    if (window.useSystemAppBar) {
                        return 0
                    }
                    return FluTools.isMacos() ? 20 : 0
                }
                displayMode: GlobalModel.displayMode
                logo: "qrc:/res/icon/app.ico"
                title: SysConstants.displayName
                Component.onCompleted: {
                    ItemsOriginal.navigationView = nav_view
                    ItemsOriginal.paneItemMenu = nav_item_right_menu
                    setCurrentIndex(0)
                }
            }
        }
    }

    closeListener: function (event) {
        dialog_close.open()
        // 取消窗口关闭
        event.accepted = false
    }

    // 监听认证状态变化
    Connections {
        target: AuthManager
        function onUserChanged() {}
    }
    function distance(x1, y1, x2, y2) {
        return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
    }

    function handleDarkChanged(button) {
        changeDark()
    }

    function changeDark() {
        if (FluTheme.dark) {
            FluTheme.darkMode = FluThemeType.Light
        } else {
            FluTheme.darkMode = FluThemeType.Dark
        }
    }
}
